.clockdemo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 24px;
    overflow: hidden;
    padding: 20px;
    height: inherit;
    background-color: black;
  }
  
  .clockdemo_number {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 225px;
    border-radius: 5px;
    border: 2px solid #0059ff;
    background-color: rgb(255, 238, 0);
  }
  
  .number {
    display: flex;
    flex-direction: row;
    margin: 0 5px; 
  }

  .separator{
    color: #913c3c;
  }
  .number:nth-of-type(1){
    background-image: linear-gradient(#00c3ff, #0059ff) !important;
  }
  .number:nth-of-type(2){
    background-image: linear-gradient(#90cadb, #e100ff) !important;
  }
  .number:nth-of-type(3){
    background-image: linear-gradient(#0baddf, #ff7300) !important;
  }
  
  .digit {
    width: 30px; 
    height: 50px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; 
    border: 1px solid #ddd; 
  }
  

  .number .digit {
    transition: transform 0.5s;
  }

  